<template>
  <div class="login-container flex-b-r">
    <div class="login-body">
      <div class="sign_box">
        <!-- 左侧姓名性别... -->
        <div class="box_left">
          <p class="p_tit"><span style="color: red">*</span> 姓名 :</p>
          <el-input v-model="input" placeholder="请输入姓名"></el-input>
          <p class="p_tit"><span style="color: red">*</span> 性别 :</p>
          <div class="sex_box">
            <div
              :class="[ele == 1 ? 'Select' : 'Unchecked']"
              @click="handelEle(1)"
            >
              男
            </div>
            <div
              :class="[ele == 2 ? 'Select' : 'Unchecked']"
              @click="handelEle(2)"
            >
              女
            </div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 身份 :</p>
          <div class="sex_box">
            <div
              :class="[standing == 1 ? 'Select' : 'Unchecked']"
              @click="handelStanding(1)"
            >
              职场精英
            </div>
            <div
              :class="[standing == 2 ? 'Select' : 'Unchecked']"
              @click="handelStanding(2)"
            >
              学生
            </div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 出生年月 :</p>
          <div style="display: flex">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <div class="Be_born"></div>
          </div>
          <p class="p_tit">
            <span style="color: red">*</span> 首次参加工作时间 :
          </p>
          <div style="display: flex">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <div class="Be_born"></div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 验证个人邮箱 :</p>
          <el-input v-model="input" placeholder="请输入个人邮箱"></el-input>
          <div class="ipt_box" style="display: flex">
            <el-input v-model="input" placeholder="请输入验证码"></el-input>
            <div class="placeholder">发送验证码</div>
          </div>
        </div>
        <!-- 右侧头像.... -->
        <div class="box_right">
          <p class="p_tit"><span style="color: red">*</span> 头像 :</p>
          <div class="avatar_box"><Avatar></Avatar></div>
          <p class="p_tit"><span style="color: red">*</span> 求职状态 :</p>
          <div class="right_sex_box">
            <div
              v-for="(item, index) in jobStatusArr"
              :key="index"
              :class="[jobStatus == item.val ? 'Select' : 'Unchecked']"
              @click="handelJobStatus(item.val)"
            >
              {{ item.Instructions }}
            </div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 求职类型 :</p>
          <div class="right_sex_box">
            <div
              v-for="(item, index) in typeArr"
              :key="index"
              :class="[SelectType == item.val ? 'Select' : 'Unchecked']"
              @click="handelSelectType(item.val)"
            >
              {{ item.Instructions }}
            </div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 学历 :</p>
          <div class="right_sex_box">
            <div
              v-for="(item, index) in learnArr"
              :key="index"
              :class="[SelectLearn == item.val ? 'Select' : 'Unchecked']"
              @click="handelLearn(item.val)"
            >
              {{ item.Instructions }}
            </div>
          </div>
          <p class="p_tit"><span style="color: red">*</span> 推荐码 :</p>
          <div class="Referral_code">
            <el-input
              v-model="input"
              placeholder="请输入推荐码（推荐人/企业的唯一ID）"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="sign_btn">
        <el-button type="primary" @click="handelSkipHomepage">注册</el-button>
      </div>
    </div>
    <div class="p_record">
      <!-- <p>Copyright © 2024 XXXXXX 京ICP备XXXXXXXX号京ICP证XXXXXX号</p> -->
    </div>
  </div>
</template>

<script>
import Avatar from "../../components/avatar.vue";
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    Avatar,
  },
  // 组件状态值
  data() {
    return {
      input: "",
      ele: "1", // 性别选择
      standing: "1", // 身份选择
      value1: "", // 出生年月
      jobStatus: "1", // 求职状态选择
      jobStatusArr: [
        { Instructions: "离职-想找工作", val: "1" },
        { Instructions: "在职-想换工作", val: "2" },
        { Instructions: "在职-寻找机会", val: "3" },
        { Instructions: "在职-不考虑", val: "4" },
      ], // 求职状态
      typeArr: [
        { Instructions: "全职", val: "1" },
        { Instructions: "兼职", val: "2" },
      ], // 求职类型
      SelectType: "1", // 求职类型选择
      learnArr: [
        { Instructions: "初中及以下", val: "1" },
        { Instructions: "中专/中技", val: "2" },
        { Instructions: "高中", val: "3" },
        { Instructions: "大专", val: "4" },
        { Instructions: "本科", val: "5" },
        { Instructions: "硕士", val: "6" },
        { Instructions: "博士", val: "7" },
      ], // 学历
      SelectLearn: "1", // 学历选择
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {
    handelEle(num) {
      this.ele = num;
    },
    handelStanding(num) {
      this.standing = num;
    },
    // 求职状态选择
    handelJobStatus(num) {
      this.jobStatus = num;
    },
    // 求职类型
    handelSelectType(num) {
      this.SelectType = num;
    },
    // 学历选择
    handelLearn(num) {
      this.SelectLearn = num;
    },
    // 点击注册   静态页面直接跳转首页
    handelSkipHomepage(){
      this.$router.push("/");
    },
  },
};
</script>

<style scoped lang="less">
//.sign_box下的内容
.box_left {
  margin-left: 12%;
  width: 28%;
  height: 100%;
  padding-top: 20px;

  // 性别选择
  .sex_box {
    width: 100%;
    display: flex;
    margin-top: 8px;
    font-size: 14px;
    .Select {
      min-width: 70px;
      min-height: 30px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #c4e1fe;
      background-color: #e6f1fc;
      cursor: pointer;
    }
    .Unchecked {
      min-width: 70px;
      min-height: 30px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #c4e1fe;
      background-color: #ffffff;
      cursor: pointer;
    }
    div:nth-child(2) {
      margin-left: 20px;
    }
  }
}
// 右侧身份验证
.box_right {
  width: 40%;
  height: 100%;
  margin-left: 15%;
  padding-top: 20px;
  .right_sex_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    font-size: 14px;
    div {
      margin-left: 10px;
      margin-top: 10px;
    }
    div:nth-child(1) {
      margin-left: 0px;
    }
    div:nth-child(5) {
      margin-left: 0px;
    }
  }
}
.Select {
  min-width: 100px;
  min-height: 30px;
  border-radius: 5px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #c4e1fe;
  background-color: #e6f1fc;
  cursor: pointer;
}
.Unchecked {
  min-width: 100px;
  min-height: 30px;
  border-radius: 5px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #c4e1fe;
  background-color: #ffffff;
  cursor: pointer;
}
//推荐码
.Referral_code {
  width: 70%;
}
// 头像
.avatar_box {
  width: 100%;
  height: 133px;
  margin-top: 10px;

  // display: flex;
}
// 标题
.p_tit {
  font-size: 18px;
  margin-top: 20px;
}
// input框
.el-input {
  margin-top: 10px;
  border: 2px solid #4095e5;
  border-radius: 5px;
}
/deep/.el-input__inner {
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  border: none !important;
}

// 邮箱验证
.placeholder {
  width: 160px;
  border: 2px solid #4095e5;
  height: 35px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  border-radius: 5px;
  color: #489ae6;
  font-size: 15px;
  line-height: 35px;
  font-weight: 500;
  cursor: pointer;
}
// 出生年月日
.Be_born {
  width: 50px;
  height: 35px;
  border: 2px solid #4095e5;
  margin-top: 10px;
  border-radius: 5px;
  margin-left: 15px;
}
// 主体内容
.login-container {
  min-width: 1230px !important;
  height: 100%;
  min-height: 740px;
  display: flex;
  //   flex-direction: column;
  background-color: #b5d6f5;
  // 中心白色区域
  .login-body {
    min-width: 1170px;
    min-height: 700px !important;
    font-size: 16px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 3px #a8c7e4;
    display: flex;
    flex-direction: column;
    .sign_box {
      width: 100%;
      min-height: 630px;
      display: flex;
    }
    .sign_btn {
      width: 100%;
      min-height: 50px;
      display: flex;
      .el-button {
        margin: auto;
        width: 80px;
      }
    }
  }
  // 下方备案号 版权
  .p_record {
    width: 100%;
    position: absolute;
    font-size: 18px;
    height: 20px;
    bottom: 30px;
    display: flex;
    p {
      margin: auto;
    }
  }
}
</style>
